<template>
    <div>
        <div class="right-body">
        <div class="operation-layout">
            <div class="operation-list Concern-ul">
                <ul>
                    <li :class="[activeIndex == 0 ? 'active' : '']" @click="activeIndex = 0,gzList()">
                        <a>我的关注（{{detailObj.followNum}}）</a>
                        <div class="after"></div>
                    </li>
                    <li :class="[activeIndex == 1 ? 'active' : '']" @click="activeIndex = 1,fsList()">
                        <a>我的粉丝（{{detailObj.fansNum}}）</a>
                        <div class="after"></div>
                    </li>


                </ul>
            </div>
        </div>

        <!-- Concern begin -->
        <div class=" Concern-view-layout">
            <ul>
                <li v-for="(item,index) in gzlists" :key="index">
                    <div class="left">
                        <img v-if="activeIndex == 0" :src="$imgPath(item.object.headImg)">
                        <img v-else :src="$imgPath(item.user.headImg)">
                    </div>
                    <div class="right">
                        <h3 v-if="activeIndex == 0">{{item.object.nickname}}</h3>
                        <h3 v-else>{{item.user.nickname}}</h3>
                        <p>
                            <label class="LV" v-if="item.objectServices.length > 0">{{item.objectServices[0].name}}</label>
                            <label>魅力值 8031</label>
                        </p>
                        <!-- <a class="yes">关注</a> -->
                        <a class="no" @click="qxFocusOn(item.object.id)">取消关注</a>
                        <!-- <a class="call">对话</a> -->
                    </div>
                </li>
            </ul>


            <!--page  begin-->
            <div class="page-layout">
                <Page :total="total" show-elevator  @on-change="change" />
            </div>
            <!--page  end-->
        </div>
        <!-- Concern end -->
    </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    props:["detailObj"],
    data(){
        return{
            gzlists:[],         // 列表
            page:0,             // 页码
            total:0,            // 总数量
            activeIndex:0,          // 切换
        }
    },
    mounted(){
        this.gzList()
    },
    methods:{
        // 关注列表
        gzList(){
            let params = {
                page:this.page,
                size:30,
            }
            apiHttp.apiCenter.listByUser(params,resp=>{                 
                this.total = resp.data.totalElements
                this.gzlists = resp.data.content
            })
        },
        // 粉丝列表
        fsList(){
            let params = {
                page:this.page,
                size:30,
            }
            apiHttp.apiCenter.listByObjectUser(params,resp=>{
               
                this.total = resp.data.totalElements
                this.gzlists = resp.data.content
            })
        },
        // 取消关注
        qxFocusOn(id){
            apiHttp.apiCenter.dropAttention(id,'',resp=>{
                if(resp.code == 200){
                    this.$Message.success('取消关注成功')
                    this.gzList()
                }
            })
        },
        // 分页
        change(index){
            this.page = index - 1
            if(this.activeIndex == 0){
                this.gzList()
            }else{
                this.fsList()
            }
        }
    }
}
</script>
<style scoped>
.Concern-ul ul li .after{
    width: 140px;
}
.call{
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    color: #d84e4d;
    font-size: 14px;
    border:solid 1px #d84e4d;
    margin-left: 10px;
}
</style>

